<template>
    <u-popup
        :show="props.modelValue"
        :closeOnClickOverlay="false"
        :safeAreaInsetBottom="false"
        :round="10"
        mode="center">
        <view class="popup">
            <view class="header">
                <image class="icon_img" :src="`/static/distribution/${state[props.auditStatus]}.png`" />
            </view>
            <view :class="['content', props.reason ? 'mb_0' : '']">{{ status[props.auditStatus] }}</view>
            <view v-if="props.reason" class="reason">{{ props.reason }}</view>
            <view class="footer" @click="onConfirm">确定</view>
        </view>
    </u-popup>
</template>

<script setup>
import { reactive } from 'vue';
const props = defineProps({
    modelValue: { type: Boolean, default: true },
    /* 1待审核 2已通过 3已拒绝 0暂无提起审核 */
    auditStatus: { type: Number, default: 0 },
    reason: { type: String, default: '' }
});
const emit = defineEmits(['update:modelValue', 'confirm']);
const state = reactive({
    1: 'pending',
    2: 'resolve',
    3: 'reject'
});
const status = {
    1: '申请成功，等待平台审核',
    2: '恭喜你升级成功！',
    3: '平台拒绝您的升级申请'
};
const onConfirm = () => {
    emit('confirm');
};
</script>

<style lang="scss" scoped>
.popup {
    width: 543rpx;
    padding: 36rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
        text-align: center;
        .icon_img {
            width: 72rpx;
            height: 72rpx;
            border-radius: 50%;
            margin: 0 auto;
        }
    }
    .content {
        margin-bottom: 43rpx;
        font-size: 31rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
    }
    .mb_0 {
        margin-bottom: 0;
    }
    .reason {
        padding: 18rpx 0 29rpx;
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
        text-align: center;
    }
    .footer {
        width: 217rpx;
        height: 65rpx;
        background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
        border-radius: 40rpx;
        font-size: 25rpx;
        text-align: center;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 65rpx;
    }
}
</style>
